<template>
  <div id="otcPayment">
      <section class="order-main-header">
             <mt-header :title="operatingSet">
            <mt-button  icon="back" slot="left" @click="back()"></mt-button>
            </mt-header>
        </section>
      <div v-if="!operating" >
          <div class="paymentMethods">
            <div class="val-input">
                <span class="me thods">{{methods[0]}}</span>
                <span class="methodMsg">{{paymentContent.bankAccount}}</span>
                <span @click="openWindow(0)">{{paymentContent.bankAccount?addOrEdit[1]:addOrEdit[0]}}</span>
            </div>
            <div class="val-input">
                <span class="methods">{{methods[1]}}</span>
                <span class="methodMsg">{{paymentContent.aliAccount}}</span>
                <span @click="openWindow(1)">{{paymentContent.aliAccount?addOrEdit[1]:addOrEdit[0]}}</span>
            </div>
            <div class="val-input val-input-b">
                <span class="methods">{{methods[2]}}</span>
                <span class="methodMsg">{{paymentContent.wechatAccount}}</span>
                <span @click="openWindow(2)">{{paymentContent.wechatAccount?addOrEdit[1]:addOrEdit[0]}}</span>
            </div>
        </div>
        <div class="payment-tip">
            <p>提示：</p>
            <div class="tip-content">
                <p>1，您必须使用实名为{{sessionData.real}}的收款方式收款，否者可能会造成交易失败等问题。</p>
                <p>2,被激活的收款方式将在交易时向买方展示，最多激活3种。</p>
            </div>
        </div>
      </div>
      <div v-if="operating">
          <div class="paymentMethods" v-if="activeWin == 0">
            <div class="val-input">
                <span class="left-key"><i class="key-i">*</i>开户姓名：</span>
                <input type="text" style="color:#8686C0;" v-model="BankCardMsg.name" readonly>
            </div>
            <div class="val-input">
                <span class="left-key"><i class="key-i">*</i>银行卡号：</span>
                <input type="text" v-model="BankCardMsg.cardNum">
            </div>
            <div class="val-input">
                <span class="left-key"><i class="key-i">*</i>开户银行：</span>
                <select name="" id="" v-model="BankCardMsg.bankName">
                    <option value="" label="" selected="" ng-bind="lang.otc.chooseBank"></option>
                        <option value="工商银行" >工商银行</option>
                        <option value="中国银行" >中国银行</option>
                        <option value="农业银行" >农业银行</option>
                        <option value="建设银行" >建设银行</option>
                        <option value="招商银行" >招商银行</option>
                        <option value="交通银行" >交通银行</option>
                        <option value="中国邮政储蓄银行" >中国邮政储蓄银行</option>
                        <option value="民生银行" >民生银行</option>
                        <option value="兴业银行" >兴业银行</option>
                        <option value="中信银行">中信银行</option>
                        <option value="光大银行" >光大银行</option>
                        <option value="华夏银行" >华夏银行</option>
                        <option value="广发银行">广发银行</option>
                        <option value="平安银行" >平安银行</option>
                        <option value="徽商银行" >徽商银行</option>
                        <option value="广州银行" >广州银行</option>
                        <option value="渤海银行" >渤海银行</option>
                        <option value="上海浦东发展银行" >上海浦东发展银行</option>
                </select>
            </div>
            <!-- <div class="val-input">
                <span class="left-key left-key-long">开户支行(选填)：</span>
                <input type="text" v-model="BankCardMsg.nickName">
            </div> -->
            <div class="val-input" style="padding-left:30px">
                <span class="left-key left-key-middle">备注(选填):</span>
                <input type="text" v-model="BankCardMsg.note">
            </div>
            <div class="val-input">
                <span class="left-key left-key-last"><i class="key-i">*</i>{{userType}}验证码：</span>
                <input type="text" class="input-code" v-model="BankCardMsg.code">
                <span class="codeBtn" @click="sendCode">{{sendCodeText}}</span>
            </div>
            <button class="addBtn" @click="sureAddorEdit(1)"  :class="{'active':!btnOff}">
                <i v-if="!paymentContent.bankAccount">{{addOrEditText[0]}}</i>
                <i v-if="paymentContent.bankAccount">{{addOrEditText[1]}}</i>
            </button>
          </div>
          <div class="paymentMethods" v-if="activeWin == 1">
            <div class="val-input">
                <span class="left-key"><i class="key-i">*</i>账号姓名：</span>
                <input type="text" style="color:#E0E0F9;" v-model="alipayMsg.name" readonly>
            </div>
            <div class="val-upload">
                <span class="left-key"><i class="key-i">*</i>支付宝收款码：</span>
                <div class="pic-show" @click="uploadImg(1)">
                    <input @change="fileChange($event)" type="file" ref="inputer" id="upload_file1" style="display: none"/>
                    <img class="thePic" :src="aliImgUrl" alt="" v-if="!hasUpload">
                    <div v-for="(value,key) in imgs" :key="key">
                        <img class="thePic" :src="getImgUrl(value)" alt="" v-if="hasUpload">
                    </div>
                </div>
                <p>请上传您的支付宝收款二维码图片(*.png/*.jpg/*.jpeg)</p>
                <div class="val-input" style="padding-left:0px">
                    <span class="left-key left-key-long">备注(选填)：</span>
                    <input type="text" style="color:#E0E0F9;" v-model="alipayMsg.note">
                </div>
            </div>
            <div class="val-input">
                <span class="left-key left-key-long"><i class="key-i">*</i>支付宝账号：</span>
                <input type="text" v-model="alipayMsg.cardNum">
            </div>
            <div class="val-input">
                <span class="left-key left-key-long"><i class="key-i">*</i>{{userType}}验证码：</span>
                <input type="text" class="input-code" v-model="alipayMsg.code">
                <span class="codeBtn" @click="sendCode">{{sendCodeText}}</span>
            </div>
            <button class="addBtn" @click="sureAddorEdit(2)"  :class="{'active':!btnOff}">
                <i v-if="!paymentContent.aliAccount">{{addOrEditText[0]}}</i>
                <i v-if="paymentContent.aliAccount">{{addOrEditText[1]}}</i>
            </button>
          </div>
          <div class="paymentMethods" v-if="activeWin == 2">
            <div class="val-input">
                <span class="left-key"><i class="key-i">*</i>实名姓名：</span>
                <input type="text" style="color:rgb(224, 224, 249)" v-model="wxPayMsg.name" readonly>
            </div>
            <div class="val-upload">
                <span class="left-key"><i class="key-i">*</i>微信收款码：</span>
                <div class="pic-show" @click="uploadImg(2)">
                    <input @change="fileChange($event)" type="file" ref="inputEr" id="upload_file2" style="display: none" />
                    <img class="thePic" :src="wxImgUrl" alt="" v-if="!hasUpload">
                    <div v-for="(value,key) in imgs" :key="key">
                        <img class="thePic" :src="getImgUrl(value)" alt="" v-if="hasUpload">
                    </div>
                </div>
                <p>请上传您的微信收款二维码图片(*.png/*.jpg/*.jpeg)</p>
                <div class="val-input" style="padding-left:0px">
                    <span class="left-key left-key-long">备注(选填)：</span>
                    <input type="text" style="color:#E0E0F9" v-model="wxPayMsg.note">
                </div>
            </div>
            <div class="val-input">
                <span class="left-key left-key-long"><i class="key-i">*</i>微信账号：</span>
                <input type="text" v-model="wxPayMsg.cardNum">
            </div>
            <div class="val-input">
                <span class="left-key left-key-long"><i class="key-i">*</i>{{userType}}验证码：</span>
                <input type="text" class="input-code" v-model="wxPayMsg.code">
                <span class="codeBtn" @click="sendCode">{{sendCodeText}}</span>
            </div>
            <button class="addBtn" @click="sureAddorEdit(3)"  :class="{'active':!btnOff}">
                <i v-if="!paymentContent.wechatAccount">{{addOrEditText[0]}}</i>
                <i v-if="paymentContent.wechatAccount">{{addOrEditText[1]}}</i>
            </button>
          </div>
      </div>
      <!-- <button @click="back" style="display:block;margin:30px auto;font-size:30px;color: #8686C0">返回上一级</button> -->
  </div>
</template>

<script>
import {uploadFiles} from "@/http/base.js";
  import { Toast } from 'mint-ui';//导入toast组件
export default {
    data() {
        return{
            operating: false,
            activeWin: 0,
            operatingSet:"法币收款方式设置",
            methods:[
                '银行卡',
                '支付宝',
                '微信',
            ],
            paymentContent:{
                aliAccount: '',
                aliNote: '',
                aliUrl: '',
                bankAccount: '',
                bankBranch: '',
                bankName: "",
                id: '',
                userNote: "",
                wechatAccount: '',
                wechatNote: '',
                wechatUrl: '',
            },
            addOrEdit:[
                '添加',
                '编辑'
            ],
            addOrEditText:[
                '确认添加',
                '确认修改'
            ],
            BankCardMsg:{
                name:'',
                cardNum:'',
                bankName:'',
                nickName:'',
                note:'',
                code:''
            },
            alipayMsg:{
                name:'',
                cardNum:'',
                note:'',
            },
            wxPayMsg:{

            },
            sendCodeText:'发送',
            aliImgUrl: require('@/assets/safeCenter/scan.png'),
            wxImgUrl:require('@/assets/safeCenter/scan.png'),
            formData:new FormData(),
            imgs: {},
            imgLen:0,
            hasUpload: false,
            msg: false,
            sessionData:'',
            userType:'',
            timeIdCode:''
        }
    },
    computed:{
        btnOff: function () {
            switch(this.activeWin) {
                case 0:
                    return !this.BankCardMsg.cardNum || !this.BankCardMsg.bankName || !this.BankCardMsg.code ;
                    break;
                case 1:
                    return !this.alipayMsg.cardNum || !this.alipayMsg.code || (!Object.keys(this.imgs).length && !this.paymentContent.aliUrl) ;
                    break;
                case 2:
                    return !this.wxPayMsg.cardNum || !this.wxPayMsg.code || (!Object.keys(this.imgs).length && !this.paymentContent.wechatUrl) ;
                    break;
            }
        }
    },
    methods:{
        back() {
            if(this.operating){
                 clearInterval(this.timeIdCode)
                 this.btnColor = 'color:#3381ff'
                this.sendCodeText = '发送'
                this.operating = false
                this.getOtcInfo()
                this.hasUpload = false;
                this.imgs = {};
                this.wxPayMsg.code='';
                this.BankCardMsg.code='';
                this.alipayMsg.code='';
                this.operatingSet="法币收款方式设置";
            }else{
                this.$router.go(-1);
            }
        },
        openWindow(index) {
            this.activeWin = index
            this.operating = true;
            if(index==0){
                this.operatingSet="添加银行卡收款";
            }else if(index==1){
                this.operatingSet="添加支付宝收款";
            }else if(index==2){
                this.operatingSet="添加微信收款";
            }
             console.log(index)
            if(!this.paymentContent){
                return;
            }
            
            switch(index){
                case 0:
                    this.BankCardMsg.cardNum = this.paymentContent.bankAccount
                    this.BankCardMsg.bankName = this.paymentContent.bankName
                    this.BankCardMsg.nickName = this.paymentContent.bankBranch;
                    if(this.paymentContent.bankAccount){
                        this.BankCardMsg.note = this.paymentContent.userNote
                    }
                case 1:
                    this.alipayMsg.cardNum = this.paymentContent.aliAccount
                    this.aliImgUrl = 'https://biplush.oss-ap-southeast-1.aliyuncs.com/'+ this.paymentContent.aliUrl;
                    if(!this.paymentContent.aliUrl){
                        this.aliImgUrl=require('@/assets/safeCenter/error.png')
                    }
                       if(this.paymentContent.cardNum){
                    this.alipayMsg.note = this.paymentContent.aliNote
                       }
                case 2:
                     if(this.paymentContent.wechatAccount){
                    this.wxPayMsg.note = this.paymentContent.wechatNote
                       }
                    this.wxPayMsg.cardNum = this.paymentContent.wechatAccount
                    this.wxImgUrl = 'https://biplush.oss-ap-southeast-1.aliyuncs.com/'+ this.paymentContent.wechatUrl
                      if(!this.paymentContent.wechatUrl){
                        this.wxImgUrl=require('@/assets/safeCenter/error.png')
                    }
            }
        },
        sendCode() {
            if(!isNaN(this.sendCodeText)){
                    return ;
                }
            this.$http.post('/v1/account/sendCode').then(res=>{
                res = res.data
                if(res.code == 200){
                    this.sendCodeText = 60
                    this.btnColor = 'color:#ddd'
                    var timeId =this.timeIdCode= setInterval(function(){
                        this.sendCodeText--
                        if(this.sendCodeText == 0){
                            clearInterval(timeId)
                            this.btnColor = 'color:#3381ff'
                            this.sendCodeText = '发送'
                        }
                    }.bind(this),1000)
                }
            }).catch(err=>{

            })
        },
        sureAddorEdit(type) {
            var data = {}
            data.type = type;
            switch(type){
                case 1:
                    data.bankName = this.BankCardMsg.bankName
                    data.bankBranch = this.BankCardMsg.nickName
                    data.bankAccount = this.BankCardMsg.cardNum
                    data.code = this.BankCardMsg.code
                    data.userNote = this.BankCardMsg.note;
                     this.$http.post('/v1/account/saveOtcInfo',data).then(res=>{
                                    res = res.data
                                    if(res.code == 200){
                                        Toast("更新成功");
                                        this.back();
                                          clearInterval(this.timeIdCode)
                                    }else if(res.code==102){
                                         Toast("验证码错误");
                                    }else if(res.code==100){
                                         Toast("请先发送验证码");
                                    }
                                }).catch(err=>{

                                })
                    break;
                case 2:
                     
                    data.aliAccount = this.alipayMsg.cardNum
                    data.code = this.alipayMsg.code
                    data.userNote = this.alipayMsg.note;
                    if(this.$refs.inputer.files[0]){
                        var file = this.$refs.inputer.files[0]
                        let formData = new FormData()
                        formData.append('img',file,file.name)
                        formData.append('type',1);
                        this.$http.upload('/v1/account/upload.html',formData,{
                            headers: { 'Content-Type': 'multipart/form-data; boundary=----WebKitFormBoundary7j36XuEUfKHvtxmd' }
                        }).then(res=>{
                            res = res.data
                            if(res.code == 200){
                                data.aliUrl = res.data
                                this.$http.post('/v1/account/saveOtcInfo',data).then(res=>{
                                    res = res.data
                                    if(res.code == 200){
                                        this.back();
                                        Toast("更新成功")
                                           clearInterval(this.timeIdCode)
                                    }else if(res.code==102){
                                         Toast("验证码错误");
                                    }else if(res.code==100){
                                         Toast("请先发送验证码");
                                    }
                                }).catch(err=>{

                                })
                            }
                        }).catch(err=>{
                            console.warn(err)
                        })
                    }else{
                        data.aliUrl = this.paymentContent.aliUrl
                        this.$http.post('/v1/account/saveOtcInfo',data).then(res=>{
                            res = res.data
                            if(res.code == 200){
                                this.back();
                                Toast("更新成功")
                                    clearInterval(this.timeIdCode)
                            }else if(res.code==102){
                                         Toast("验证码错误");
                            }else if(res.code==100){
                                         Toast("请先发送验证码");
                            }
                        }).catch(err=>{

                        })
                    }
                    break;
                case 3:
                    data.wechatAccount = this.wxPayMsg.cardNum
                    data.code = this.wxPayMsg.code
                    data.userNote = this.wxPayMsg.note
                    if(this.$refs.inputEr.files[0]){
                        var file = this.$refs.inputEr.files[0]
                        let wxData = new FormData()
                        wxData.append('img',file,file.name)
                        wxData.append('type',1)
                        this.$http.upload('/v1/account/upload.html',wxData,{
                            headers: { 'Content-Type': 'multipart/form-data; boundary=----WebKitFormBoundary7j36XuEUfKHvtxmd' }
                        }).then(res=>{
                            res = res.data
                            if(res.code == 200){
                                data.wechatUrl = res.data
                                this.$http.post('/v1/account/saveOtcInfo',data).then(res=>{
                                    res = res.data
                                    if(res.code == 200){
                                        Toast("更新成功")
                                        this.back();
                                         clearInterval(this.timeIdCode)
                                    }else if(res.code==102){
                                         Toast("验证码错误");
                                    }else if(res.code==100){
                                         Toast("请先发送验证码");
                            }
                                }).catch(err=>{

                                })
                            }
                        }).catch(err=>{
                            console.warn(err)
                        })
                    }else{
                        data.wechatUrl = this.paymentContent.wechatUrl
                        this.$http.post('/v1/account/saveOtcInfo',data).then(res=>{
                            res = res.data
                            if(res.code == 200){
                                Toast("更新成功");
                                  clearInterval(this.timeIdCode)
                                this.back()
                            }else if(res.code==102){
                                         Toast("验证码错误");
                            }else if(res.code==100){
                                         Toast("请先发送验证码");
                            }
                        }).catch(err=>{

                        })
                    }
                    break;
            }
        },
        getOtcInfo() {
            this.$http.get('/v1/account/getOtcInfo').then(res=>{
                res = res.data.data;
                if(res==null){
                   return ;
                }
                this.paymentContent = res
            }).catch(err=>{
            })
        },
        uploadImg(index) {
            if(index == 1){
                document.getElementById('upload_file1').click();
            }else if(index == 2){
                document.getElementById('upload_file2').click();
            }
        },
        fileChange(el) {
            this.imgs = {}
            let inputDOM =  (this.activeWin == 1? this.$refs.inputer: this.$refs.inputEr);
            this.fil = inputDOM.files;
            let oldLen=this.imgLen;
            // let len=this.fil.length+oldLen;
            // if(len>4){
            //     alert('最多可上传4张，您还可以上传'+(4-oldLen)+'张');
            //     return false;
            // }
            for (let i=0; i < this.fil.length; i++) {
                let size = Math.floor(this.fil[i].size / 1024);
                if (size > 5*1024*1024) {
                    Toast('请选择5M以内的图片！');
                    return false
                }
                this.imgLen++;
                this.$set(this.imgs,this.fil[i].name+'?'+new Date().getTime()+i,this.fil[i]);
            }
            this.hasUpload = true
            console.log(this.imgs)
            // if (!el.target.files[0].size) return;
            // this.fileList(el.target);
            // el.target.value = ''
        },
        getImgUrl(file) {
            var url = null ;
            if (window.createObjectURL!=undefined) { // basic
            url = window.createObjectURL(file) ;
            } else if (window.URL!=undefined) { // mozilla(firefox)
            url = window.URL.createObjectURL(file) ;
            } else if (window.webkitURL!=undefined) { // webkit or chrome
            url = window.webkitURL.createObjectURL(file) ;
            }
            return url ;
        },
          handleClose(){
                this.$router.go(-1);
            },
        // fileList(fileList) {
        //     let files = fileList.files;
        //     for (let i = 0; i < files.length; i++) {
        //         //判断是否为文件夹
        //         if (files[i].type != '') {
        //             this.fileAdd(files[i]);
        //         } else {
        //             //文件夹处理
        //             this.folders(fileList.items[i]);
        //         }
        //     }
        // }
    },
    mounted() {
         this.$http.post('/v1/session?'+ new Date().getTime(),{}).then(res=>{
            res = res.data
            if(res.code == 200){
                this.sessionData=res.data;
                this.BankCardMsg.name=res.data.real;
                this.alipayMsg.name=res.data.real;
                this.wxPayMsg.name=res.data.real;
                if(this.sessionData.loginName.search("@")>-1){
                    this.userType='邮箱';
                }else{
                     this.userType='短信';
                }
            }
        })
        this.getOtcInfo();
    },
    destroyed() {
        clearInterval(this.timeIdCode)
    },
}
</script>

<style lang="less" scoped>
.order-main-header{
    padding-left: 30px;
    padding-right: 30px;
    height: 100px;
}
.key-i{
    color: #F36D7D;
}
.mint-header{
    height: 100px;
    font-size: 32px;
    background-color: #161736;
    color: #E0E0F9
}
    *{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    #otcPayment{
        font-family:PingFang SC;
        font-weight:500;
        color: #8686C0;
    }
    .user-top {
        height: 110px;
        line-height: 110px;
        padding: 0 60px;
        border-bottom: 2px solid #161736;
    }
    .paymentMethods{
        font-size:32px;
        .val-input{
            padding: 0 30px 0px 30px;
            height: 93px;
            line-height: 93px;
            border-bottom: 1px solid #161736;
            display: flex;
            .methods{
                font-size: 28px;
                display: inline-block;
                width: 100px;
            }
            .methodMsg{
                flex: 1;
                padding-right: 59px;
                font-size: 22px;
                text-align: right;
                color:#8686C0
            }
            span:nth-child(3){
                font-size:28px;
                color:#5298F1;
            }
            .left-key{
                letter-spacing: 9px;
            }
            .left-key-long{
                letter-spacing: -1px;
            }
            .left-key-middle{
                letter-spacing: 9.8px;
            }
            .left-key-last{
                letter-spacing: 3.5px;
            }
            input,select{
                width: 478px;
                outline: none;
                border: none;
                background:none;
                font-size: 28px;
                padding-left: 20px;
                flex: 1;
                color:#8686C0;
            }
            .codeBtn{
                width: 58px;
                text-align: center;
                font-size: 28px;
            }
        }
        .val-input-b:nth-child(3){
            border-bottom: none;
        }
        .receive-code-tip{
            margin-top: 23px;
            font-size: 28px;
            margin-left: 30px;
        }
        .addBtn{
            display: block;
            width: 426px;
            height: 58px;
            line-height: 58px;
            font-size: 30px;
            color: #ffffff;
            text-align: center;
            margin:143px auto;
            margin-bottom: 0;
            border-radius: 4px;
            height:86px;
        background:rgba(51,129,255,1);
        border-radius:10px;
        }
        .addBtn.active{
            background-color: #3381ff;
        }
        .val-upload{
            padding-top: 38px;
            padding-left: 30px;
            .pic-show{
                width: 120px;
                height: 120px;
                margin: 38px 0 24px 102px;
            }
            .thePic{
                width: 100%;
                height: 100%;
            }
            p{
                font-size:28px;
                color: #8686C0;
                margin-bottom: 20px;
            }
        }
    }
    .payment-tip{
        padding: 84px 33px 0;
        font-size: 28px;
        .tip-content{
            margin: 33px 4px 0 29px;
            font-size:28px;
            color:#8686C0;
            line-height:36px;
        }
    }
</style>